<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../js/jquery-2.0.0.min.js"></script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="flexible_css.debug.js" ></script>
		<script type="text/javascript" src="flexible.debug.js" ></script>
		<link rel="stylesheet" href="../css/mui.min.css" />
		<style type="text/css"> 
			html,
			body,
			p {
				margin: 0;
				padding: 0;
			}
			
			.back_333 {
				background: #333;
			}
			
			.color_fff {
				color: #fff;
			}
			
			.color-888 {
				color: #888888;
			}
			
			.font-size03 {
				font-size: 0.3rem;
			}
			
			.font-size025 {
				font-size: 0.25rem;
			}
			
			.top_pub {
				position: absolute;
				right: 0.8rem;
				top: 25%;
			}
			
			.icon-all {
				background: url(../images/all.png) center no-repeat;
				padding: 0.5rem;
				background-size: 50%;
			}
			
			.icon-location {
				background: url(../images/fujin.png) center no-repeat;
				padding: 0.5rem;
				background-size: 50%;
			}
			
			.icon-add {
				background: url(../images/icon_plus.png) center no-repeat;
				padding: 0.5rem;
				background-size: 50%;
			}
			
			.menu-1 {
				background: #fff;
				padding: 0.2rem 0.2rem;
				border-bottom: 1px solid #F1F1F1;
				border-top: 1px solid #F1F1F1;
			}
			
			.menu-1 p {
				width: 20%;
				display: inline-block;
				text-align: center;
				line-height: 230%;
				font-size: .25rem;
				color: #FF3333;
				margin-top: 0.1rem;
			}
			
			.menu-r-add {
				float: right;
				text-align: right;
				margin-right: -0.2rem;
				margin-top: 0.35rem!important;
			}
			
			.content-o {
				margin-top: 0.2rem;
				background: #fff;
			}
			
			.content-o img {
				width: 100%;
				height: 3.5rem;
			}
			
			.con-title {
				color: #333;
				padding: 0 0.2rem;
			}
			
			.f-right {
				float: right;
			}
			
			.con-time {
				font-size: 0.22rem;
				display: inline-block;
				width: 50%;
			}
			
			.con-location {
				display: inline-block;
				position: absolute;
				right: 0.2rem;
			}
			
			.con-type {
				font-size: 0.2rem;
				color: #333;
				padding-left: 0.2rem;
			}
		</style>
	</head>
	<header id="header" class="mui-bar mui-bar-nav back_333">
		<span class="color_fff font-size03">北京市</span>
		<a class="mui-icon mui-icon-arrowdown color_fff"></a>
		<h1 class="mui-title color_fff">组局</h1>
		<a class="mui-icon mui-icon-plusempty color_fff mui-pull-right"></a>
		<span class="color_fff font-size03 top_pub ">发布</span>
	</header>

	<body>
		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img  src="../images/10.jpg">
							<p class="mui-slider-title">静静看这世界</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/10.jpg">
							<p class="mui-slider-title">幸福就是可以一起睡觉</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/10.jpg">
							<p class="mui-slider-title">想要一间这样的木屋，静静的喝咖啡</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/10.jpg">
							<p class="mui-slider-title">Color of SIP CBD</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/10.jpg">
							<p class="mui-slider-title">静静看这世界</p>
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator mui-text-right">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
			<div class="menu-1">
				<p>
					<span class="icon-all"></span></br>
					<span>全部</span>
				</p>
				<p>
					<span class="icon-location"></span></br>
					<span class="color-888">附近</span>
				</p>
				<p class="menu-r-add">
					<span class="icon-add"></span>
				</p>
			</div>

			<div class="content-o">
				<img src="../images/pic06.jpg" />
				<p class="font-size03 con-title">中央电视台星光大道最初录制舞台魔术表演
					<span class="f-right">0元起</span></br>
					<span class="con-time">2017-06-09 20:00</span>
					<span class="con-location">
						<span class="mui-icon mui-icon-location font-size03"></span>
					<span>0.0km</span>
					</span>
					</br>
					<span>北京市 丰台区双林东路5号（五号公馆内）</span>
					<p class="con-type">
						<span>演艺</span> |
						<span>少儿教育 艺术</span>
					</p>
				</p>
			</div>
		</div>
		</br>
		</br>
		</br>
		</br>
		</br>
		</br>
		</br>
	</body>

</html>